<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>我的收藏</title>
    <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css"/>
</head>

<body>
<!--页面顶部白条条，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="nav-bottom"></div>
<script type="text/javascript">$(".nav-bottom").load("top.html");</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
</body>
<!--header-->
<div id="account">
    <div class="py-container">
        <div class="yui3-g collect">
            <!--左侧列表-->
            <div class="yui3-u-1-6 list">

                <div class="person-info">
                    <div class="person-photo"><img src="img/_/photo.png" alt=""></div>
                    <div class="person-account">
                        <span class="name">Michelle</span>
                        <span class="safe">账户安全</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="list-items">
                    <dl>
                        <dt><i>·</i> 订单中心</dt>
                        <dd><a href="home-index.html">我的订单</a></dd>
                        <dd><a href="home-order-pay.html">待付款</a></dd>
                        <dd><a href="home-order-send.html">待发货</a></dd>
                        <dd><a href="home-order-receive.html">待收货</a></dd>
                        <dd><a href="home-order-evaluate.html">待评价</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 我的中心</dt>
                        <dd><a href="home-person-collect.html" class="list-active">我的收藏</a></dd>
                        <dd><a href="home-person-footmark.html">我的足迹</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 物流消息</dt>
                    </dl>
                    <dl>
                        <dt><i>·</i> 设置</dt>
                        <dd><a href="home-setting-info.html">个人信息</a></dd>
                        <dd><a href="home-setting-address.html">地址管理</a></dd>
                        <dd><a href="home-setting-safe.html">安全管理</a></dd>
                    </dl>
                </div>
            </div>
            <!--右侧主内容-->
            <div class="yui3-u-5-6 goods">
                <div class="body">
                    <div style="border: 0px solid;height: 20px"></div>
                    <div style="width: 200px" class="sui-btn btn-bordered btn-danger">
                        <h4>关注的商品</h4>
                    </div>
                    <div style="width: 200px;" class="sui-btn btn-bordered btn-danger" @click="removeAll">
                        <h4>清空我的关注</h4>
                    </div>
                    <div style="border: 0px solid;height: 30px"></div>
                    <div>
                        <hr style=" width:100%;margin:0 auto; border: 0;height: 2px; background: #333;
                    background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));"/>
                    </div>
                    <div style="border: 0px solid;height: 40px"></div>
                    <div class="goods-list">
                        <ul class="yui3-g" id="goods-list" v-if="myFavorite!=null&&myFavorite.length>0">
                            <li class="yui3-u-1-4" v-for="(fv,index) in myFavorite" :key="index">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <a :href="'/item/'+fv.spuId+'.html'">
                                            <img :src="fv.image" alt=''>
                                        </a>
                                    </div>
                                    <div class="price"><strong><em>¥</em> <i>{{ly.formatPrice(fv.price)}}</i></strong>
                                    </div>
                                    <div class="attr">
                                        <em>{{fv.title.length<40?fv.title:fv.title.substring(0,40)+'...'}}</em></div>
                                    <div class="cu"><em><span>促</span>满一件可参加超值换购</em></div>
                                    <div class="operate">
                                        <a href="javascript:void(0);" target="_blank"
                                           class="sui-btn btn-bordered btn-danger" @click.prevent="addCart(fv)">加入购物车&gt;</a>
                                        <a href="javascript:void(0);" target="_blank"
                                           class="sui-btn btn-bordered btn-danger" @click.prevent="removeCart(fv)">移除此关注&gt;</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div v-if="myFavorite.length==0">
                            <div class="message"
                                 style="border: 0px solid;width:500px;height: 120px;margin: 100px 400px">
                                <font size="4px"><font color="#a52a2a">亲,您还没有关注任何商品,快去找找心仪的商品吧!</font></font>

                                <div style="border: 0px solid;width: 100px;height: 100px;">

                                </div>

                                <div>
                                    <a href="//www.leyou.com/" class="ftx-05" class='sui-btn btn-xlarge btn-danger'
                                       style="margin: 150px">
                                        <span><font size="3px"> 点我出发&gt;</font></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="border: 0px solid;height: 40px"></div>
                    <hr style=" width:100%;margin:0 auto; border: 0;height: 2px; background: #333;
                    background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));"/>
                    <div style="border: 0px solid;height: 40px"></div>
                    <div class="liked">
                        <ul class="sui-nav nav-tabs">
                            <li class="active">
                                <a href="#index" data-toggle="tab">猜你喜欢</a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <div class="tab-content">
                            <div id="index" class="tab-pane active">
                                <div id="myCarousel" data-ride="carousel" data-interval="4000"
                                     class="sui-carousel slide">
                                    <div class="carousel-inner">


                                        <div class="active item">
                                            <ul style="text-align: center;width:1000px">
                                                <li style="float: left;width:40%;margin: auto"
                                                    v-for="(sku1,index) in skus1" :key="index">
                                                    <a :href="'/item/'+sku1.spuId+'.html'">
                                                        <img :src="sku1.image" width="215px" height="215px"/>
                                                    </a>
                                                    <div class="intro">
                                                        <i>{{sku1.title<40?sku1.title:sku1.title.substring(0,40)+'...'}}</i>
                                                    </div>
                                                    <div class="money">
                                                        <span><font
                                                                color="red">{{ly.formatPrice(sku1.price)}}元</font></span>
                                                    </div>
                                                    <div class="incar">
                                                        <a href="javascript:void(0)"
                                                           class="sui-btn btn-bordered btn-xlarge btn-default"
                                                           @click.prevent="addCart(sku1)"><i
                                                                class="car"></i><span class="cartxt">加入购物车></span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>


                                        <div class="item">
                                            <ul style="text-align: center;width:1000px">
                                                <li style="float: left;width:40%;margin: auto"
                                                    v-for="(sku2,index) in skus2" :key="index">
                                                    <a :href="'/item/'+sku2.spuId+'.html'">
                                                        <img :src="sku2.image" width="215px" height="215px"/>
                                                    </a>
                                                    <div class="intro">
                                                        <i>{{sku2.title<40?sku2.title:sku2.title.substring(0,30)+'...'}}</i>
                                                    </div>
                                                    <div class="money">
                                                        <span><font
                                                                color="red">{{ly.formatPrice(sku2.price)}}元</font></span>
                                                    </div>
                                                    <div class="incar">
                                                        <a href="javascript:void(0)"
                                                           class="sui-btn btn-bordered btn-xlarge btn-default"
                                                           @click.prevent="addCart(sku2)"><i
                                                                class="car"></i><span class="cartxt">加入购物车</span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>


                                        <div class="item">
                                            <ul style="text-align: center;width:1000px">
                                                <li style="float: left;width:40%;margin: auto"
                                                    v-for="(sku3,index) in skus3" :key="index">
                                                    <a :href="'/item/'+sku3.spuId+'.html'">
                                                        <img :src="sku3.image" width="215px" height="215px"/>
                                                    </a>
                                                    <div class="intro">
                                                        <i>{{sku3.title<40?sku3.title:sku3.title.substring(0,40)+'...'}}</i>
                                                    </div>
                                                    <div class="money">
                                                        <span><font
                                                                color="red">{{ly.formatPrice(sku3.price)}}元</font></span>
                                                    </div>
                                                    <div class="incar">
                                                        <a href="javascript:void(0)"
                                                           class="sui-btn btn-bordered btn-xlarge btn-default"
                                                           @click.prevent="addCart(sku3)"><i
                                                                class="car"></i><span class="cartxt">加入购物车</span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>


                                        <div class="item">
                                            <ul style="text-align: center;width:1000px">
                                                <li style="float: left;width:40%;margin: auto"
                                                    v-for="(sku4,index) in skus4" :key="index">
                                                    <a :href="'/item/'+sku4.spuId+'.html'">
                                                        <img :src="sku4.image" width="215px" height="215px"/>
                                                    </a>
                                                    <div class="intro">
                                                        <i>{{sku4.title<40?sku4.title:sku4.title.substring(0,40)+'...'}}</i>
                                                    </div>
                                                    <div class="money">
                                                        <span><font
                                                                color="red">{{ly.formatPrice(sku4.price)}}元</font></span>
                                                    </div>
                                                    <div class="incar">
                                                        <a href="javascript:void(0)"
                                                           class="sui-btn btn-bordered btn-xlarge btn-default"
                                                           @click.prevent="addCart(sku4)"><i
                                                                class="car"></i><span class="cartxt">加入购物车</span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>


                                        <div class="item">
                                            <ul style="text-align: center;width:1000px">
                                                <li style="float: left;width:40%;margin: auto"
                                                    v-for="(sku5,index) in skus5" :key="index">
                                                    <a :href="'/item/'+sku5.spuId+'.html'">
                                                        <img :src="sku5.image" width="215px" height="215px"/>
                                                    </a>
                                                    <div class="intro">
                                                        <i>{{sku5.title<40?sku5.title:sku5.title.substring(0,40)+'...'}}</i>
                                                    </div>
                                                    <div class="money">
                                                        <span><font
                                                                color="red">{{ly.formatPrice(sku5.price)}}元</font></span>
                                                    </div>
                                                    <div class="incar">
                                                        <a href="javascript:void(0)"
                                                           class="sui-btn btn-bordered btn-xlarge btn-default"
                                                           @click.prevent="addCart(sku5)"><i
                                                                class="car"></i><span class="cartxt">加入购物车</span></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>


                                    </div>
                                    <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
                                    <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="js/vue/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/common.js"></script>
<script>
    let account = new Vue({
        el: "#account",
        data: {
            ly,
            myFavorite: [],
            skus1: [],
            skus2: [],
            skus3: [],
            skus4: [],
            skus5: []
        },
        created() {
            this.loadCartsInfo();
            this.ly.http.get("cart/myFavorite")
                .then(({data}) => {
                    console.log(data);
                    this.myFavorite = data;
                })
                .catch(resp => {

                })
        },
        methods: {
            //加载图片的方法
            loadCartsInfo() {
                this.ly.http.get("/item/queryAll2")
                    .then(({data}) => {
                        this.skus1 = data.skus1;
                        this.skus2 = data.skus2;
                        this.skus3 = data.skus3;
                        this.skus4 = data.skus4;
                        this.skus5 = data.skus5;
                    })
            },
            addCart(sku) {
                //校验登录
                ly.http.get("auth/verify")
                //已经登录
                    .then(() => {
                        ly.http.post("/cart/addCart", sku)
                            .then(() => {
                                //获取本地carts信息
                                let ccc = this.carts || [];
                                //找出对应的商品信息
                                let ddd = ccc.find(x => x.skuId === sku.skuId);
                                //校验是否carts信息中存在即将要加入的商品信息
                                if (ddd) {
                                    //存在,修改数量即可
                                    ddd.num = ddd.num + sku.num;
                                } else {
                                    //不存在,直接添加
                                    ccc.push(sku);
                                }
                                //赋值给本地carts
                                this.carts = ccc;
                                // 跳转  用来展示购物车的内容
                                window.location.href = "http://www.leyou.com/cart.html";
                            })
                            .catch(() => {
                                alert("添加失败");
                            })

                    })
                    //未登录
                    .catch(() => {
                        let localCarts = ly.store.get("carts") || [];

                        let storeCart = localCarts.find(ct => ct.skuId === sku.skuId);

                        //本地已经有了就改值
                        if (storeCart) {
                            storeCart.num = storeCart.num + sku.num;
                        } else {
                            localCarts.push(sku);
                        }

                        //赋值到本地数据
                        this.carts = localCarts;

                        //把最新的数据重新存储
                        ly.store.set("carts", localCarts);

                        // 跳转  用来展示购物车的内容
                        window.location.href = "/cart.html";
                    })
            },
            removeCart(cart) {
                let result = confirm("确定移除吗?")
                if (result) {
                    //找出要移除的商品
                    let rmCart = this.myFavorite.find(fv => fv.skuId == cart.skuId);
                    //发送请求到后台,删除收藏表中对应的商品
                    this.ly.http.delete("/cart/deleteFavorite/" + rmCart.skuId)
                        .then(() => {
                            //后台删除成功,删除本地数据
                            for (let i = 0; i < this.myFavorite.length; i++) {
                                if (this.myFavorite[i].skuId == cart.skuId) {
                                    this.myFavorite.splice(i, 1);
                                }
                            }
                        })
                        .catch(() => {
                            //后台删除失败
                            alert("服务器错误")
                        })
                }
            },
            //清空所有
            removeAll() {
                let result = confirm("亲,此操作将清空关注列表,确定吗?");
                if (result) {
                    this.ly.http.delete("cart/removeAllFavorite")
                        .then(() => {
                            this.myFavorite = []
                        })
                        .catch(() => {
                            alert("服务器错误!")
                        })
                }
            }

        }
    })
</script>

</html>